<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>The London News</title>
<style>
	html,body{
		margin:0px;
		padding:0px;
	}
	#page{
		width:1000px;
	}
	#header{
		background-color:#333;
		color:#FFF;
		font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
		font-size:36px;
		border:3px solid #999;
		padding-bottom:10px;
	}
	#header p{
		margin-left:50px;
	}
	#nav{
		float:left;
		widows:15%;
		padding-right:20px;
	}
	#content{
		position:relative;
		float:right;
		width:80%;
	}
	#footer{
		background-color:#333;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size:14px;
		color:#fff;
		text-align:center;
		clear:both;
		padding:1pt 0px;
	}
	#main{
		#padding-bottom:100px;
	}
	img#main_pic{
		float:left;
		margin:5px 10px;
		width:500px;
		height:350px;
	}
	p#main_txt{
		font:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
		font-size:20px;
		line-height:1.5em;
		margin-top:30px;
		padding-right:10px;
		margin-bottom:0px;
		text-align:justify;
	}
	a.main_link{
		float:left;
		clear:left;
		color:grey;
		padding:5px 5px;
		margin-top:10px;
		font-size:smaller;
	}
	a.main_link:hover{
		background-color:#222;
	}
	#main h1{
		position:relative;
		padding:10px 35px;
		margin-bottom:0px;
		background-color:#666;
		#left:515px;
		#width:200px;
		#height:100px;
		display:inline-block;
		text-align:center;
	}
	#news{
		position:relative;
		float:left;
		clear:left;
		padding:10px 5px;
		margin-top:20px;
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	}
	#news_left{
		float:left;
		width:48%;
		margin:0px 5px;
	}
	#news_left img{
		float:left;
		margin-right:10px;
	}
	#news_right{
		float:left;
		width:48%;
		margin:0px 5px;
	}
	#news_right img{
		float:left;
		margin-right:10px;
	}
	#news h3{
		display:inline-block;
		margin-top:5px;
		background-color:#666;
		padding:5px 0px;
		font-size:19px;
	}
	#nav_ul{
		line-height:1.5em;
		padding-left:20px;
		padding-right:45px;
		width:100%;
		list-style-type:none;
		font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	}
	#nav_ul a{
		text-decoration:none;
		color:#fff;
		#background-color:grey;
	}
	#nav_ul li:before{
		#content:"| ";
		font-weight:900;
		#background-color:red;
		color:red;
		display:inline;
	}
	#nav_ul li{
		background-color:grey;
		margin-bottom:5px;		
	}
	#nav_ul li:hover{
		background-color:#966;
	}
</style>
</head>

<body>
	<div id="page">
  	<div id="header">
    	<p>The London News</p>
    </div>
    <div id="nav">
    	<ul id="nav_ul">
      	<li><a href="#">Local News</a></li>
        <li><a href="#">National News</a></li>
        <li><a href="#">World News</a></li>
        <li><a href="#">Politics</a></li>
        <li><a href="#">Science</a></li>
        <li><a href="#">Techonlogy</a></li>
        <li><a href="#">Travel</a></li>
        <li><a href="#">Bueiness</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">Entertainment</a></li>
      </ul>
    </div>
    <div id="content">
    	<div id="main">
      	<img id="main_pic" src="1.png" alt="london picture" />
        <h1>The Big Freeze</h1>
        <p id="main_txt">London braces itssef for a big freeze as forcasters pred ct a
        severe drop in termperedtur across the captar. The Met Office
        weather team mdatted that temperatures would rewram in negative
        degress until Wednesday with winds making it feel even colder</p>
        <a class="main_link" href="#">Read more</a>
      </div>
      <div id="news">
      	<div id="news_left">
        	<img src="1.jpg" alt="news left picture" />
         	<h3>Farms Cleared</h3>
          <p>The three farms in the centre of the latest scare to hit the
          agfi-cufuray communrty have been grver mail clear</p>
          <a class="main_link" href="#">Read more</a>
        </div>
        <div id="news_right">
        	<img src="2.jpg" alt="new right picture" />
          <h3>Interest Rate Rises</h3>
          <p>The Bank of Engrand has raised the base imerest rate another half 
          percert - the faurth consecuttry rise in interest ates in as many
          quarfers</p>
          <a class="main_link" href="#">Read more</a>
        </div>
      </div>
    </div>
    <div id="footer">
    	<p>copyright by hopy @ 1981-2015</p>
    </div>
  </div>
</body>
</html>
